/*
	创建事件监听封装的函数
	pram:
	ele 表示元素(事件绑定的对象)
	type 表示事件类型
	callback 表示回调函数(即一个函数)
*/
function addEvent(ele, type, callback){
	if(ele.addEventListener){
		ele.addEventListener(type, callback, false);
	}else if(ele.attachEvent){
		ele.attachEvent('on'+type, callback);
	}
}
/*
	获取某个特定元素的属性
	pram:
	ele 表示元素
	attr表示属性
*/
function getStyle(ele, attr){
	if(window.getComputedStyle){
		return getComputedStyle(ele, null)[attr];
	}else{
		return ele.currentStyle[attr];
	}
}

//阻止冒泡封装
//直接在需要阻止的函数里调用函数stopBulle()
function stopBulle(e){
	var e = e || window.event;
	if(e.stopPropagation){
		e.stopPropagation();
	}else{
		e.cancelBubble = true;
	}
}

/*
	获取元素
	pram:
	ele 表示元素
*/
function my$(ele){
	return document.querySelector(ele);
}

//匀速运动
var timer = null;
//如果一个函数的参数过多的情况下，必须记住参数的顺序，便利性不好，不利于使用
//可以通过对象的形式去传递参数，可以把参数当做对象的一个属性
function uniformSpeed(options){
	//console.log(options);
	//先清除再开启
	clearInterval(options.ele.timer);
	//使用定时器
	options.ele.timer = setInterval(function(){
		//获取到现在的位置
		var begin = parseInt(getStyle(options.ele, options.attr));
		//步长  step = (target - begin)/10
		var step = (options.target - begin)/10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step); 
		//位置+步长
		var res = begin + step;
		//赋值
		options.ele.style[options.attr] = res + 'px';
		
		if(res == options.target){
			clearInterval(options.ele.timer);
			//当有这个函数名称的时候，再调用函数
			//两个条件必须都满足，才能执行
			options.callback && options.callback();
		}
	}, 30)
}





	//变速运动
/*
	pram:
	ele:代表元素
	target：代表目标值
	attr: 代表属性
	callback: 回调函数 --- 把函数当成一个参数给函数使用
*/
function changeSpeed(ele, taregt, attr, callback){
	//先清除再开启
	clearInterval(ele.timer);
	//使用定时器
	ele.timer = setInterval(function(){
		//获取到现在的位置
		var begin = parseInt(getStyle(ele, attr));
		//步长  step = (target - begin)/10
		var step = (taregt - begin)/10;
		step = step > 0 ? Math.ceil(step) : Math.floor(step); 
		//位置+步长
		var res = begin + step;
		if(res == taregt){
			clearInterval(ele.timer);
			//当有这个函数名称的时候，再调用函数
			//两个条件必须都满足，才能执行
			callback && callback();
		}
		ele.style[attr] = res + 'px';
	}, 30)
}


/* 
	获取 cookie
	@param key 要获取的 cookie 的 名称
	@param return 获取到的值
*/
function getCookie(key){
	const cookie = document.cookie
	// a=100000; b=200; c=300
	const arr = cookie.split('; ')
	// 拿到的是一个数组 此时继续遍历循环数组 把数组里面的每一项进行切割
	for(let i = 0 ; i < arr.length ; i++){
		const arr1 = arr[i].split('=')
		// console.log(arr1)
		if(arr1[0] === key){
			return arr1[1]
		}
	}
	return null
}
/* 
	设置 cookie
	@param key 要设置的 cookie 名称
	@param value 要设置的 cookie 值
	@param expires 要设置的 cookie 的过期时间 单位是 s 
*/
function setCookie(key,value,expires){
	const date = new Date()
	if(expires){
		const time = date.getTime() - 8 * 60 * 60 * 1000 + expires * 1000
		date.setTime(time)
	}
	document.cookie = `${key}=${value};path=/;expires=${expires ? date : ''}`
}

/* 
	删除 cookie
	// 只能删除同一路径下的
*/
function deleteCookie(key){
	setCookie(key,'随便',-1)
}


/* 
options{
    url:'test.php',
    type:'get',
    success(){

    }, 
    data:参数
    dataType:'json'
}

*/

function ajax(options){
    // 请求地址是必传的 因为我没有办法给你一个默认地址
    if(!options.url){
        // 手动抛出一个错误
        throw new Error('url 是必传项')
    }
    if(!options.success){
        // 手动抛出一个错误
        throw new Error('success 函数是必传项')
    }
    if(typeof(options.success) !== 'function'){
        throw new Error('success 必须是一个函数')
    }

    // 定义一个默认参数
    const defaultOptions = {
        type:'get',
        data:'',
        dataType:''
    }

    // 把 defaultOptions 进行一个处理  传了参数用传入的 没有传入就用默认的
    for(let key in options){
        defaultOptions[key] = options[key]
    }

    // console.log(defaultOptions)
    // 发送请求
    const xhr = new XMLHttpRequest()
    // 先把数据解构出来
    const { type,url,data,dataType,success } = defaultOptions

    if(type.toUpperCase() === 'GET'){
        xhr.open(type,url + '?' + data)
        xhr.send()
    }else{
        xhr.open(type,url)
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')
        xhr.send(data)
    }

    xhr.onreadystatechange = () => {
        if(xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)){
            // 请求成功可以拿到数据了 
            dataType === 'json' ? success(JSON.parse(xhr.responseText)) : success(xhr.responseText)
        }
    }

}

function pAjax(options){
	return new Promise((resolve, reject) => {
		ajax({
			...options,  // 把 options 展开放到这个对象里面
			success(res) {
				resolve(res)
			}
		})
	})
}


function animate(ele, options, duration,callback) {
    clearInterval(ele.timer)
    let start = {}, range = {}
    for (let key in options) {
        start[key] = parseFloat(css(ele, key))
        range[key] = options[key] - start[key]
    }
    let startTime = +new Date()
    ele.timer = setInterval(() => {
        let nowTime = +new Date()
        let timeDifference = Math.min(nowTime - startTime,duration)
        for(let attr in options){
            let res = range[attr] / duration * timeDifference + start[attr]
            res = attr === 'opacity' ? res : res +'px'
            ele.style[attr] = res
        }
        if(timeDifference >= duration){
            clearInterval(ele.timer)
            callback && callback()
        }
    },10)
}

function fadeIn(ele,duration,fn){
    css(ele,'display','block')
    css(ele,'opacity',0)
    animate(ele,{opacity:1},duration,fn)
}

function fadeOut(ele,duration,fn){
    css(ele,'display','block')
    css(ele,'opacity',1)
    animate(ele,{opacity:0},duration,fn)
}